<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">

    <button @click="handleClick('back')">返回上一页</button>
    <button @click="handleClick('push')">跳转到parent</button>
    <button @click="handleClick('replace')">替换到parent</button>
    <div>{{ food }}</div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
export default {
  name: 'Home',
  // 路由组件传参：函数模式
  props: {
    food: {
      type: String,
      default: 'apple'
    }
  },
  // 组件内的路由守卫  ==== 开始
  beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被确认前调用
    // 不！能！获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建
    // next()
    next(vm => {
      console.log(vm) // vm是组件的this实例
    })
  },
  beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    const leave = confirm('您确定要离开吗？')
    if (leave) next()
    else next(false)
  },
  // 组件内的路由守卫  ==== 结束
  methods: {
    handleClick (type) {
      // this.$router.go(-1) or this.$router.back() // 返回上一页

      // this.$router.go(1) // 前进一页

      // this.$router.push() // 可以回退
      // this.$router.replace() // 不可以回退，是替换路由

      if (type === 'back') this.$router.back()
      else if (type === 'push') { // 可以退回的跳转方式
        this.$router.push({ // 命名路由的方式
          name: 'argu',
          params: {
            name: 'lison'
          }
        })

        // this.$router.push('/parent') // 根据路径跳转方式

        // const name = 'gao'
        // this.$router.push({ // 根据路径跳转方式并传参，注意，用path方式，加params传参无效
        //   path: `/argu/${name}`
        // })
      } else if (type === 'replace') { // 不可以退回的跳转方式
        this.$router.replace({ // 命名路由跳转
          name: 'parent'
        })

        this.$router.replace('/parent') // 据路径跳转
      }
    },
    getUserInfo () {
      getUserInfo({ userName: '哈哈' }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>
